// 1.初始化新的axios实例
// 2.请求拦截器,如果本地有token,则请求头携带
// 3.响应拦截器,处理返回数据,验证token是否失效
// 4.请求工具函数

import axios from "axios";
import store from "@/store";
import router from "@/router";
import { baseURL } from "./config"

const instance = axios.create({
    baseURL,
    timeout: 5000
})

instance.interceptors.request.use(config => {
    // 拦截业务逻辑
    // 进行请求配置的修改,如果本地有token,则请求头携带
    // 1.获取用户信息对象
    const { profile } = store.state.user
    // 2.判断是否有token
    if (profile.token) {
        // 设置token
        config.headers.Authorization = `Bearer ${profile.token}`
    }
    return config
}, err => {
    return Promise.reject(err)
})

instance.interceptors.response.use(response => {
    return response.data
}, err => {
    // 状态码401处理
    if (err.response && err.response.status === 401) {
        // 1.清空无效用户信息
        store.commit("user/setUser", {})
        // 2.跳转到登录页
        // 3.跳转需要传参(当前地址)给登录页
        // 如果是组件里怎么跳转？
        // "/user?a=10"  $route.path=== /user 不行,拿不到额外的参数
        // $route.fullPath 可以拿到全部地址加参数
        // js模块中: router.currentRoute.value.fullPath就是当前路由地址
        // 注意 router.currentRoute在vue3中是一个ref响应式对象
        // 这里对url地址做了转换url编码,为了防止多参数,qurey无法解析成功
        const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
        router.push("/login?redirectUrl=" + fullPath)
    }
    return Promise.reject(err)
})

// 请求工具函数
export default (url, method, submitData) => {
    return instance({
        url,
        method,
        // 1.如果是get,则需要使用params来传递参数
        // 2.如果不是,需要使用data传递参数
        [method.toLowerCase() === "get" ? "params" : "data"]: submitData
    })
}
